/* eslint-disable no-unused-vars */
// \u4e00-\u9fa5] 中文验证规则
import validate from 'wechat-validate'
Page({
  // 通过behaviors引入 validate方法
  behaviors: [validate],
  rules: {
    name: [
      {required: true, message: '请输入姓名'},
      {pattern: /^[\u4e00-\u9fa5]{2,4}$/, message: '请输入正确的姓名'}
    ],
    mobile: [
      {required: true, message: '请输入手机号'},
      {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号'}
    ],
    idcardFrontUrl: [
      {required: true, message: '请上传身份证正面'},
    ],
    idcardBackUrl: [
      {required: true, message: '请上传身份证反面'},
    ],
  },
  data: {
    id: undefined,
    point: '',
    building: '',
    room: '',
    name: '',
    mobile: '',
    gender: 1,
    idcardFrontUrl: '',
    idcardBackUrl: '',
  },
   // 加载用户信息
   onLoad({point, building, room,id}){
    if(id) {
      // 如果存在id，就进行编辑回显
      this.getDetail(id)
      wx.setNavigationBarTitle({title: '编辑房间信息'})
    } else{
       
      this.setData({ point, building, room })
    } 
  },
  // 如果存在id，则回显数据，并赋给表单 
  async getDetail(id) {
    const res = await wx.http.get(`/room/${id}`)
    console.log(res);
    
    this.setData({ ...res.data })
  },
  // 移除图片
  removePicture(e) {
    //移除图片的类型（身份证正面或反面）可选链操作符
    const type = e.mark?.type
    this.setData({ [type]: '' })
  },
  // 上传身份证图片信息
  async chooseIdCard(e){
    // 在每个图像上绑定一个mark类型，用以绑定他的类型，然后解构出来，这样点击不同的图片，就可以上传不同的图片类型
    const {type} = e.mark
    const { tempFiles } = await wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
    })
    if(tempFiles[0].size > 1*1024*1024) return wx.utils.toast( '图片大小不能超过1M' )
    // console.log(res.tempFiles[0].tempFilePath);
    const res = await wx.http.upload('/upload', {
      name: 'file',
      filePath: tempFiles[0].tempFilePath,
    })
    // console.log(res);
    this.setData({
      // 根据对象key 用[] 插值动态设置key值
      [type]: res.data.url,
    })
  },
  // 提交表单进行验证
  async onSubmit() {
    // 校验所有rules
    const isAllValid = this.validate()
    // 校验表单，如果不符合规则，则中断处理
    if(!isAllValid) return wx.utils.toast('请检查表单信息')
    // 由于小程序会自动给表达加上其他属性，所以需要我么对其进行删除后再进行上传
    // 解决方案1，delete关键字将其从data对象中删除
    // delete this.data.id
    // delete this.data.__webviewId__
    // console.log(this.data);

    // 方案2，将需要的信息从数组中解构出来，然后进行上传
    // const { point, building, room, name, mobile, gender, idcardFrontUrl, idcardBackUrl } = this.data
    // console.log( point, building, room, name, mobile, gender, idcardFrontUrl, idcardBackUrl );
    // 方案3，将不需要的信息从对象中解构出来，剩下的参数作为剩余参数进行上传

    // 细节处理1，由于返回时不需要传入id，但编辑时需要传入id，所以id是需要的，但又不能真的传给后端
    // 所以要将其定义为undefined，传给后端的同时，不给他赋值
    //细节处理2，当进行编辑完毕后，理应返回到列表页，但由于之前添加房屋时，固定让其返回了四级，所以应当进行判断之后再传入要返回的级别
    // 细节处理3，由于编辑时会返回一个审核状态码，但是我梦修改上传时并不需要这个参数，所以需要将他一并修理掉
    const {__webviewId__,status, ...body} = this.data
    console.log(body);
    const res = await wx.http.post('/room', body)
    // console.log(res);
    //对返回的级别进行判断
    wx.navigateBack({delta:body.id ? 2 : 4})
    
  },
  
})
